<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Performance Test</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script src="../src/tweenjs/AbstractTween.js"></script>
	<script src="../src/tweenjs/Tween.js"></script>
	<script src="../src/tweenjs/Ease.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var c=createjs, stage, stageW, stageH, fpsFld, g, ttl;
	var duration=300, radius=480, displayTime=3000;

	function init() {
		fpsFld = document.getElementById("fps");
		stage = new c.Stage("testCanvas");
		
		stageW = stage.canvas.width;
		stageH = stage.canvas.height;
		g = new c.Graphics().f("#012").dc(0,0,1);
		ttl = 0;
		
		c.Ticker.framerate = 60;
		c.Ticker.timingMode = c.Ticker.RAF;
		c.Ticker.on("tick",tick);
	}
	
	function tween(dot) {
		var angle = Math.random() * Math.PI * 2;
		dot.x = stageW/2;
		dot.y = Math.random()*stageH;
		
		c.Tween.get(dot, {loop:-1}).wait(Math.random() * duration )
				.to({x:Math.cos(angle) * radius + stageW/2}, duration, c.Ease.cubicIn);
	}
	
	function tick(evt) {
		var render = (displayTime -= evt.delta) > 0;
		if (render) { stage.update(); }
		var fps = c.Ticker.getMeasuredFPS(120), t = c.Ticker.getMeasuredTickTime(20);;
		fpsFld.innerHTML = ttl+" @ "+fps.toFixed(0)+"fps ("+t.toFixed(0)+"ms) "+(render ? "" : " RENDERING DISABLED");
		
		var count = (t>15) ? 0 : Math.max(1,Math.ceil(Math.pow(15-t, 3)/250))*250;
		for (var i= 0; i<count; i++) {
			tween(stage.addChild(new c.Shape(g)));
		}
		ttl += count;
	}

</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>Performance Test</h1>
	<p>This will continuously add tweens until Tween is taking over 15ms per tick (ie. slightly better than 60fps). Note that this only accounts for the time spent in
	Tween; some browsers have additional overhead that could result in the actual framerate being noticeably lower than 60fps. Safari amy also throttle the test to
	30fps, which makes getting accurate results difficult for that browser.
	<br/><br/>
	It will update the stage for the first 3 seconds (to confirm functionality), then stop rendering to isolate tween performance.</p>
</header>

<canvas id="testCanvas" width="960" height="350"></canvas>
<span id="fps" style="font-family:monospace; font-weight: bold; opacity:0.5;">-- fps</span>
</body>
</html>
